<!--
 * @Author: Yang Zhang
 * @Date: 2022-05-26 19:50:31
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2022-05-26 19:57:28
 * @Description: 
-->
<template>
	<view class="chose-type-wrap">
		<ul class='type-list'>
			<li class="list-item" v-for="item in typeList" :key="item.value" @click.stop='chosedVal = item.value'>
				<view class="label">
					{{item.label}}
				</view>
				<image v-if="item.value === chosedVal" class="icon" src="../../../static/images/self-written/right.png"
					mode="aspectFill"></image>
			</li>
		</ul>
		<view class="bottm-btn">
			<view class="confirm-btn" @click="confirmChose">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chosedVal: '',
				typeList: [{
						value: 1,
						label: '不动产'
					},
					{
						value: 2,
						label: '存款',
					},
					{
						value: 3,
						label: '车辆',
					},
					{
						value: 4,
						label: '债权或债券',
					},
					{
						value: 5,
						label: '上市公司股票',
					},
					{
						value: 6,
						label: '非上市公司股权',
					},
					{
						value: 7,
						label: '贵重物品',
					},
					{
						value: 8,
						label: '理财产品',
					},
					{
						value: 9,
						label: '知识产权',
					},
					{
						value: 10,
						label: '其他财产',
					}
				]
			};
		},
		methods: {
			confirmChose() {
				uni.navigateTo({
					url: `/pages/index/selfWrittenWill/index?val=${this.chosedVal}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.chose-type-wrap {
		background-color: #fff;
		min-height: 100vh;

		.type-list {
			width: 100vw;
			box-sizing: border-box;
			padding: 23rpx 20rpx;

			.list-item {
				height: 75rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				display: flex;
				justify-content: space-between;

				.icon {
					width: 28rpx;
					height: 20rpx;
				}
			}
		}

		.bottm-btn {
			padding: 67rpx 22rpx;
			position: fixed;
			bottom: 0;
			left: 0;
		}

		.confirm-btn {
			width: 706rpx;
			height: 88rpx;
			background: #53B3D9;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
